<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="referrer" content="never" />
  <title>综合案例</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .container {
      width: 1200px;
      margin: 0 auto;
    }

    .video video {
      width: 100%;
      padding: 20px 0;
    }

    .elevator {
      position: fixed;
      top: 280px;
      right: 20px;
      z-index: 999;
      background: #fff;
      border: 1px solid #e4e4e4;
      width: 60px;
    }

    .elevator a {
      display: block;
      padding: 10px;
      text-decoration: none;
      text-align: center;
      color: #999;
    }

    .elevator a.active {
      color: #1286ff;
    }

    .outline {
      padding-bottom: 300px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="header">
      <a href="http://pip.itcast.cn">
        <img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
      </a>
    </div>
    <div class="video big">
      <video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
    </div>
    <div class="intro big">
      <img src="./images/intro.png" alt="" />
    </div>
    <div class="outline big">
      <img src="./images/outline.png" alt="" />
    </div>
    <div class="elevator">
      <a href="javascript:;">视频介绍</a>
      <a href="javascript:;">项目课程</a>
      <a href="javascript:;">课程大纲</a>
    </div>
  </div>
  <script src="./js/lodash.min.js"></script>
  <script>
    const video = document.querySelector('.video video')

    // 1. 记录播放位置：节流
    // 1.1 给视频注册 timeupdate事件 : 当视频播放条发生变化的时候就会触发
    // 1.2 把视频的当前时间 currentTime 持久化到本地 

    video.addEventListener('timeupdate', _.throttle(function () {
      // console.log(1, video.currentTime)

      // 本地存储视频播放的当前事件
      localStorage.setItem('video_time', video.currentTime)
    }, 1000))
/*currentTime 是 HTML5 视频或音频元素的属性之一，用于获取或设置媒体文件当前的播放时间。

具体来说，currentTime 表示当前媒体文件已经播放的时长，以秒为单位。我们可以通过获取或设置 currentTime 属性来实现快进、快退、跳转到指定时间等操作。*/

    // 2. 页面打开让视频播放进度到本地记录的时间位置
    // 2.1 注册 loadeddata 事件 ： 等视频准备好了在修改时间
    // 2.2 让视频的当前时间修改为 本地存储的时间
    video.addEventListener('loadeddata', function () {
      video.currentTime = localStorage.getItem('video_time') || 0
    })
    /*loadeddata 是一个 HTML5 视频或音频元素的事件，用于在媒体文件加载完毕后触发。

具体来说，当播放器成功加载媒体文件之后，会触发 loadeddata 事件，以通知页面媒体文件已经可以正常播放。这个事件只会在媒体文件首次加载成功后触发一次，之后再次播放同一个媒体文件时不会触发该事件。

通过监听 loadeddata 事件，我们可以在媒体文件加载完成后执行一些后续操作，比如自动播放、获取媒体总时长等等。*/

    // video.addEventListener('play', function () {
    //   console.log('开始播放')
    // })

    // video.addEventListener('ended', function () {
    //   console.log('播放结束咯')
    // })

    // 3. 电梯导航激活效果
    //    保证资源加载完毕，高度已经撑开
    window.onload = () => {
      // 3. 电梯导航激活效果
      const smalls = document.querySelectorAll('.elevator a')
      const bigs = document.querySelectorAll('.big')

      document.addEventListener('scroll', _.throttle(() => {
        console.log('滚动了')

        const n = document.documentElement.scrollTop
        for (let i = 0; i < bigs.length; i++) {
          // 遍历的同时来判断，当前滑动的距离是不是大于等于了当前大模块，然后选出对应的小模块添加高亮
          if (n >= bigs[i].offsetTop) {
            const old = document.querySelector('.elevator .active')  // 如果没有则返回为 null
            old && old.classList.remove('active')
            smalls[i].classList.add('active')
          }
        }
      }, 200))
    }
  </script>
</body>

</html>